<template>
  <MainLayout>
    <section class="secure-header">
      <div class="container">
        <div class="secure-header-title">数据安全</div>
        <div class="secure-header-content">
          每天，成千上万的用户设计和共享在AnyRender中创建的项目。您的工作很有价值，我们努力确保您的隐私和数据永远不会受到损害。以下是我们采取的关键措施：
        </div>
      </div>
    </section>

    <section class="secure-content">
      <div class="container">
        <div class="secure-level">
          <div class="secure-level-content">
            <div class="secure-level-title">安全级别</div>
            <div class="secure-level-desc">
              ISO27001是全球公认的评估组织安全实践生命周期的标准。这是对风险、合规性和治理的严格评估，验证了一个组织对信息安全采取了成熟、管理良好的方法。
            </div>
            <div class="secure-level-btn">
              <div class="secure-level-btn-inner">请参阅ISO 27001证书</div>
            </div>
          </div>
          <div class="secure-iso">
            <img src="/images/index/secure/iso.jpg" alt="" />
          </div>
        </div>
      </div>
    </section>

    <div class="secure-info-list">
      <div class="container">
        <div class="secure-info-list-title">安全实践</div>
        <div class="secure-info-list-content">
          <div class="secure-info-item" v-for="item in secureList" :key="item.title">
            <div class="secure-info-item-title">{{ item.title }}</div>
            <ul class="secure-info-item-ul">
              <li v-for="tip in item.tipsList" :key="tip">{{ tip }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </MainLayout>
</template>

<script setup>
  import { ref } from "vue";

  const secureList = ref([
    {
      title: "数据安全",
      tipsList: [
        "我们的服务托管在亚马逊网络服务（AWS)设施中，确保防止单个数据中心故障。",
        "我们保持生产、分期和开发环境的明确分离。",
        "分类数据经过加密、安全存储和管理。",
        "我们所有的AWS数据服务都已配置为在静态时使用AES256位密钥加密。",
      ],
    },
    {
      title: "产品安全",
      tipsList: [
        "我们的持续交付实践确保了安全、可靠和快速的更改。",
        "我们定期进行漏洞扫描和渗透测试。",
        "事件管理流程已到位，以处理安全漏洞。",
      ],
    },
    {
      title: "基础设施和网络",
      tipsList: [
        "我们使用TLS来保护数据传输，并实施了HTTP严格传输安全来抵御降级攻击。",
        "网络分割是我们安全战略的关键部分。",
        "我们的托管环境确保了数据的安全性和可用性。",
      ],
    },
    {
      title: "操作安全",
      tipsList: [
        "用户数据余存储在多个AWS数据中心，并持续备份。",
        "我们维护风险评估策略和方法，并坚持严格的访问管理原则。",
      ],
    },
    {
      title: "组织安全",
      tipsList: [
        "安全培训对所有员工都是强制性的。",
        "我们维护所有网络、服务、服务器和设备的准确库存。",
        "一个专门的信息安全团队确保保护客户数据。",
      ],
    },
    {
      title: "企业级安全",
      tipsList: [
        "业客户具有额外的功能来提供更多的定制和隐私，包括单点登录（SSO）和基于角色的访问控制（RBAC）。",
        "我们使用全局CDN来防止网络攻击，并保持AnyRender的高度可用性。",
      ],
    },
  ]);
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .secure-header {
    padding: $spacing-xxl 0;
    text-align: center;
    .container {
      .secure-header-title {
        font-size: 68px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;

        letter-spacing: 10px;
      }
      .secure-header-content {
        margin: 0 auto;
        width: 100%;
        font-size: 16px;
        color: #000;
      }

      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .secure-header-title {
          font-size: 48px;
          letter-spacing: 6px;
        }
        .secure-header-content {
          margin-top: 20px;
          font-size: 14px;
          width: 80%;
        }
      }
      @media (max-width: $breakpoint-mobile) {
        .secure-header-title {
          font-size: 36px;
          letter-spacing: 4px;
        }
      }
    }
  }

  .secure-content {
    padding: 25px 0;
    .container {
      .secure-level {
        display: flex;
        justify-content: space-between;
        .secure-level-content {
          flex: 1;
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .secure-level-title {
            font-size: 36px;
            font-weight: 500;
            color: #383838;
          }
          .secure-level-desc {
            margin: 30px 0 50px;
            font-size: 16px;
            color: #585858;
          }
          .secure-level-btn {
            .secure-level-btn-inner {
              display: inline-block;
              font-size: 16px;
              color: #703ffa;
              border: 1px solid #703ffa;
              border-radius: 10px;
              padding: 6px 20px;
              cursor: pointer;
              transition: all 0.3s ease;
              &:hover {
                background-color: #703ffa;
                color: #fff;
              }
            }
          }
        }
        .secure-iso {
          flex: 1;
          width: 50%;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .secure-level {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .secure-level-content {
            flex: 1 1 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .secure-level-title {
              font-size: 36px;
              font-weight: 500;
              text-align: center;
            }
            .secure-level-desc {
              margin: 30px 0 50px;
              font-size: 16px;
              text-align: center;
            }
            .secure-level-btn {
              text-align: center;
              .secure-level-btn-inner {
                font-size: 16px;
                padding: 6px 20px;
              }
            }
          }
          .secure-iso {
            flex: 1 1 100%;
            width: 100%;
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .secure-level {
          .secure-level-content {
            .secure-level-title {
              font-size: 32px;
            }
            .secure-level-desc {
              margin: 20px 0 40px;
              font-size: 16px;
            }
            .secure-level-btn {
              .secure-level-btn-inner {
                font-size: 16px;
                padding: 6px 20px;
              }
            }
          }
        }
      }
    }
  }

  .secure-info-list {
    padding: 30px 0 80px;
    .container {
      .secure-info-list-title {
        font-size: 44px;
        font-weight: 500;
        color: #000;
        text-align: center;
        margin-bottom: 50px;
      }
      .secure-info-list-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
        .secure-info-item {
          width: calc(33.33% - 30px);
          .secure-info-item-title {
            font-size: 30px;
            font-weight: 500;
            color: #383838;
            margin-bottom: 20px;
          }
          .secure-info-item-ul {
            li {
              font-size: 16px;
              color: #585858;
              &::before {
                content: "•";
                color: #585858;
                font-size: 16px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .secure-info-list-title {
          font-size: 36px;
        }
        .secure-info-list-content {
          gap: 25px;
          .secure-info-item {
            width: calc(50% - 25px);
            .secure-info-item-title {
              font-size: 26px;
            }
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      .container {
        .secure-info-list-title {
          font-size: 32px;
          margin-bottom: 40px;
        }
        .secure-info-list-content {
          gap: 20px;
          .secure-info-item {
            width: 100%;
            .secure-info-item-title {
              font-size: 24px;
            }
            .secure-info-item-ul {
              li {
                font-size: 16px;
                &::before {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      .container {
        .secure-info-list-title {
          font-size: 28px;
          margin-bottom: 30px;
        }
        .secure-info-list-content {
          .secure-info-item {
            .secure-info-item-title {
              font-size: 18px;
            }
            .secure-info-item-ul {
              li {
                font-size: 14px;
                &::before {
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
